<template>
	<view class="detail">
		<swiper class="swiper" indicator-dots autoplay>
			<swiper-item v-if="detail.icon" class="swiper-item" v-for="(item, index) in detail.icon.split(',')"
				:key="index">
				<image class="cover-img" :src="item" />
			</swiper-item>
		</swiper>


		<view class="block main-info">
			<view class="name">{{detail.name}}</view>
			<view class="price">{{detail.price?detail.price:999}}</view>
			<view class="desc">{{detail.info}}</view>
		</view>
		<view class="block html-box">
			<view v-html="detail.content"></view>
		</view>
		<button class="start-time" open-type="contact">在线咨询</button>
	</view>
</template>

<script>
	import {
		goodsDetail
	} from '../../api/goods';
	import {
		formatRichImg
	} from '../../common';
	export default {
		data() {
			return {
				detail: {

				},
				id: null,
			}
		},
		onLoad(data) {
			this.id = data.id
			this.getInfo()
		},
		methods: {
			async getInfo() {
				const res = await goodsDetail({
					id: this.id
				})
				let data = res.data.data
				data.content = formatRichImg(data.content)
				this.detail = res.data.data
			},
			consultNow() {
				console.log('立即咨询');
			}
		}
	}
</script>



<style lang="scss" scoped>
	.detail {
		position: relative;
		background: #F5F5F5;
		min-height: 100vh;
		padding-bottom: 30rpx;

		.swiper,
		.swiper-item,
		.cover-img {
			width: 100vw;
			height: 50vh;
		}

		.block {
			padding: 30rpx;
			background: #fff;
			margin-top: 24rpx;

			.name {
				font-size: 32rpx;
				font-weight: bold;
			}

			.price {
				font-weight: bold;
				color: #5985D0;
				margin: 10rpx 0;
			}

			.key-point {
				border: 2rpx solid #5985D0;
				width: fit-content;
				padding: 0 10rpx;
				color: #5985D0;
				font-size: 26rpx;
				margin: 10rpx 0;
			}

			.desc {
				font-size: 26rpx;
				font-weight: 400;
				color: #666697;
			}
		}

		.time-box {
			display: flex;
			align-items: center;

			.time-text {}


		}
	}

	.start-time {
		background: #5985D0;
		color: #fff;
		width: 98%;
		text-align: center;
		padding: 16rpx 26rpx;
		border-radius: 45rpx;
		font-size: 26rpx;
		position: fixed;
		bottom: 10rpx;
		left: 50%;
		transform: translateX(-50%);
	}
	
	.html-box {
		margin-bottom: 200rpx;
	}
</style>